<template>
  <!-- 保养记录 -->
  <view class="carbasicboxs">
    <view class="carbox">
      <view class="font-34 color-333 font-bold">
        保养提示
      </view>
      <view class="cariconboxzh mt-30 flex">
        <view class="fistbox">
          <view class="fiscente">
            <view class="font-26 color-999 mb_15">下次保养时间</view>
            <view class="font-28 color-333">
              {{histjllist.nextMaintenanceTime}}
            </view>
          </view>
        </view>
        <view class="caritwo">
          <view class="fistbox2">
            <view class="fiscente">
              <view class="font-26 color-999 mb_15">下次保养里程</view>
              <view class="font-28 color-333">
                {{histjllist.nextMileage}}km
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-gap height="20" bg-color="#F6F6F6"></u-gap>
    <view class="carboxdis">
      <view class="carnames font-34 color-333 font-bold" style="background-color: #FFFFFF;">
        历史记录
      </view>
      <view class="" style="background-color: #FFFFFF;padding-top: 20rpx;" v-for="(item,index) in histjllist.list" :key="index">
        <view class="cardiss">
          <view class="cariconbox flex">
            <view class="carifist">
              <view class="fistbox">
                <view class="fiscente">
                  <view class="font-26 color-999 mb_15">保养时间</view>
                  <view class="baoxtu font-28 color-333 flex">
                    {{item.accomplish_Time}}
                  </view>
                </view>
              </view>
            </view>
            <view class="caritwo">
              <view class="fistbox2">
                <view class="fiscente">
                  <view class="font-26 color-999 mb_15">保养里程</view>
                  <view class="font-28 color-333">
                    {{item.mileage}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="cariconbox mt-30 flex">
            <view class="fistboxzhWW">
              <view class="fiscente">
                <view class="font-26 color-999 mb_15">门店</view>
                {{item.store_Name}}
              </view>
            </view>
          </view>
          <view class="cariconbox mt-30 flex">
            <view class="fistboxzhWW">
              <view class="fiscente">
                <view class="font-26 color-999 mb_15">保养项目</view>
                {{item.status_Name}}
              </view>
            </view>
          </view>
          <view class="" @click="orderClick(item)">
            <view class="fistboxhei flex flex-jc-sb flex-ai-c">
              <view class="flex flex-ai-c">
                <view class="font-26 color-999">服务订单</view>
                <view class="font-28 color-333 flex flex-ai-c ml-25">
                  {{item.orderId}}
                </view>
              </view>
              <view class="1234">
                <u-icon name="arrow-right" color="#9A9A9A" size="24rpx"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <u-gap height="14" bg-color="#F6F6F6"></u-gap>
      </view>
      <view style="height: 400rpx; background-color: #FFFFFF;">
        <!-- 默认图 -->
        <defaultImg :show="defaultImg" msg="暂无历史记录"></defaultImg>
      </view>
    </view>
  </view>
</template>

<script>
  import defaultImg from '@/components/defaultImg/defaultImg.vue' //默认图片组件
  export default {
    components: {
      defaultImg
    },
    props: {
      tabIndex: {
        type: [Number, String],
        default: 0
      },
      carid: {
        type: String,
        default: ''
      },
    },
    watch: {
      tabIndex(newVal, oldVal) {
        if (newVal === 1) {
          this.cuttnum = newVal
          if (this.caridone) {
            this.GetMaintenanceRecord(this.caridone)
          }
        }
      },
      carid(e) {
        // 车子id不为空
        this.caridone = e
        if (this.cuttnum === 1) {
          if (e) {
            this.GetMaintenanceRecord(e)
          }
        }
      }
    },
    data() {
      return {
        cuttnum: 0,
        caridone: '',
        histjllist: [{
            name: ''
          },
          {
            name: ''
          },
          {
            name: ''
          }
        ],
        defaultImg: false, //默认图
      }
    },
    created() {
      //页面直接传参会直接拿到tabIndex值，且tabIndex并不会变化
      this.cuttnum = this.tabIndex
    },
    methods: {
      //获取我的爱车--保养记录
      async GetMaintenanceRecord(carid) {
        try {
          let data = {
            pageIndex: 1,
            pageSize: 10,
            loveCarId: carid
          }
          const res = await this.$api.commodity.GetMaintenanceRecord(data)
          if (res.nextMaintenanceTime !== '') {
            res.data.nextMaintenanceTime = res.data.nextMaintenanceTime.split('T')[0]
          }
          res.data.list.forEach(item => {
            item.accomplish_Time = item.accomplish_Time.split('T')[0]
          })
          this.histjllist = res.data

          if (res.data.total === 0) {
            this.defaultImg = true
          } else {
            this.defaultImg = false
          }
        } catch (e) {
          console.log(e)
        }
      },
      //服务订单
      orderClick(dats) {

      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background: #F6F6F6;
  }

  .carbasicboxs {
    background: #ffffff;
    height: 85vh;
  }

  .carbox {
    padding: 30rpx 24rpx 0rpx;
    background: #ffffff;
  }

  .carboxdis {
    background: #F6F6F6;
  }

  .carnames {
    padding: 30rpx 24rpx 0rpx 24rpx;
  }

  .cardiss {
    padding: 0rpx 24rpx 0rpx;
  }

  .cariconbox {
    border-bottom: 1px solid #EEEEEE;
    padding: 0rpx 4rpx 30rpx 4rpx;
  }

  .cariconboxzh {
    padding: 0rpx 4rpx 30rpx 4rpx;
  }

  .fistbox {
    border-right: 1px solid #EEEEEE;
    padding-right: 40rpx;
    width: 350rpx;
    height: 76rpx;
    display: flex;
  }

  .fiscente {
    align-self: center
  }

  .baoxtu {
    image {
      width: 44rpx;
      height: 44rpx;
      margin-right: 15rpx;
    }
  }

  .fistboxzh {
    padding-right: 40rpx;
    width: 350rpx;
    height: 76rpx;
    display: flex;
  }

  .fistboxzhWW {
    padding-right: 40rpx;
    height: 76rpx;
    display: flex;
  }

  .fistboxhei {
    height: 76rpx;
  }

  .fistbox2 {
    padding-left: 70rpx;
    width: 350rpx;
    height: 76rpx;
    display: flex;
  }

  .front-icon {
    width: 40rpx;
    text-align: center;

    .arrow-up {
      transform: rotate(180deg);
      color: #FBB000
    }

    .arrow-down {
      color: #333333
    }
  }

  .carhaoc {
    margin-left: 30rpx;
  }

  .hgzbox {
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    height: 780rpx;

    .hgztitle {
      border-bottom: 1px solid #EEEEEE;
      line-height: 96rpx;
      font-size: 36rpx;
      color: rgba(51, 51, 51, 1);
      padding: 0rpx 40rpx;

      .titname {
        width: 680rpx;
        text-align: center;
      }

      .iconcss {
        text-align: right;
      }
    }

    .hgxz {
      line-height: 90rpx;
      font-size: 30rpx;
      color: rgba(102, 102, 102, 1);
    }

    .hgxuanzhong {
      line-height: 90rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FBB000;
    }

  }
</style>
